html
{
   background-color:white;
    width: 1040px;
    height:100%;
} 
.h1
{
text-shadow: 1px 1px #FF0000;
text-align: center;
font-size: 12px
}
.myMap
{
    border: 2px solid #000 ;
    height: 600px;  
    width: 1040px;
}
.draggable
{
 width: 1040px;
 height:100%; 
 cursor: pointer;
 text-align: center;
}
#left {
    float: left;
  }
 #right {
    float: right;
  }
  #myTextCanvas
  {
  position: absolute;
  left: 1063px;
  top: 0px;
  }
#myImageCanvas
  {
  position: absolute;
      border: 2px;
left: 1060px;
  cursor: pointer
  }
  #arrow
	{
	position: absolute;
    left: 980px;
	top: 60px;
    cursor: pointer
    }
    #flag
	{
    padding: 30px 0px;
    cursor: pointer
    }
    #biblo{
        position: absolute; 
        left: 1060px;
        top: 300px; 
    }
    ul.a{
        text-align: justify;
        list-style-type: square;
        list-style-position: outside;
    }
    p.b{
       text-align: center; 
    }
    #persianWar1{
        position: absolute; 
        left: 1220px;
        top: 615px; 
        display: none;
        cursor: pointer;
    }
    #persianWar1a{
        position: absolute; 
        left: 1115px;
        top: 660px; 
        display: none;
        cursor: pointer;
    }
    #persianWar1b{
        position: absolute; 
        left: 1215px;
        top: 660px; 
        display: none;
        cursor: pointer;
    }
    #persianWar1c{
        position: absolute; 
        left: 1315px;
        top: 660px; 
        display: none;
        cursor: pointer;
    }
    #dilos{
        position: absolute; 
        left: 1048px;
        top: 660px; 
        display: none;
        cursor: pointer;
    }
    #peloponWar{
        position: absolute; 
        left: 1198px;
        top: 660px; 
        display: none;
        cursor: pointer;
        opacity: 0.8;
    }
    #makedonia{
        position: absolute; 
        left: 1348px;
        top: 660px; 
        display: none;
        cursor: pointer;
        opacity: 0.8;
    }
    #warP1{
        position: absolute; 
        left: 1055px;
        top: 660px; 
        display: none;
        cursor: pointer;
        opacity: 0.8;
    }
    #warP1a{
        position: absolute; 
        left: 1155px;
        top: 660px; 
        display: none;
        cursor: pointer;
        opacity: 0.650;
    }
    #warP2{
        position: absolute; 
        left: 1255px;
        top: 660px; 
        display: none;
        cursor: pointer;
        opacity: 0.8;
    }
    #warP3{
        position: absolute; 
        left: 1355px;
        top: 660px; 
        display: none;
        cursor: pointer;
        opacity: 0.8;
    }
    #mak1{
        position: absolute; 
        left: 1165px;
        top: 660px; 
        display: none;
        cursor: pointer;
    }
    #mak2{
        position: absolute; 
        left: 1265px;
        top: 660px; 
        display: none;
        cursor: pointer;
        opacity: 0.8;
    }